#{extends 'main.html' /} #{set title:'Home' /} #{set 'moreStyles'}
#{stylesheet 'jquery.dataTables.css'/} #{/set} #{set 'moreScripts'}

#{script 'jquery.js'/} #{script 'jquery.dataTables.js'/}
<script type="text/javascript">
	$(function() {
		$('#questionList').dataTable({
			"iDisplayLength": 50,
			"bAutoWidth" : false,
			"oLanguage" : {
				"sLengthMenu" : 	"&{'table.sLengthMenu'}",
				"sZeroRecords" : 	"&{'table.sInfo'}",
				"sInfo" : 			"&{'table.sInfo'}",
				"sInfoEmpty" : 		"&{'table.sInfo'}",
				"sInfoFiltered" : 	"&{'table.sInfoFiltered'}",
				"sSearch" : 		"&{'table.sSearch'}",
				"oPaginate" : {
					"sNext" : 		"&{'table.sNext'}",
					"sPrevious" : 	"&{'table.sPrevious'}",
					"sFirst" : 		"&{'table.sFirst'}",
					"sLast" : 		"&{'table.sLast'}"
				}
			}
		});
	});
</script>
#{/set}

<table cellpadding="0" cellspacing="0" border="1" class="display" id="questionList" width="100%">
	<thead>
		<tr>
			<th width="6%">&{'questionList.table.header.number'}</th>
			<th width="40%">&{'questionList.table.header.question'}</th>
			<th width="18%">&{'questionList.table.header.answer.right'}</th>
			<th width="18%">&{'questionList.table.header.answer.wrong'}</th>
			<th width="18%">&{'questionList.table.header.answer.wrong'}</th>
			<th width="18%">&{'questionList.table.header.tag'}</th>
			<th width="18%">&{'questionList.table.header.edit'}</th>
			<th width="18%">&{'questionList.table.header.sendtomobile'}</th>
		</tr>
	</thead>
#{list questions, as:'question'}
	<tr>
		<td>${question.id}</td>
		<td>${question.question}</td>
		<td>${question.rightAnswer}</td>
		<td>${question.wrongAnswer1}</td>
		<td>${question.wrongAnswer2}</td>
		<td>${question.tag}</td>
		<td><a href="@{Application.editQuestion(question.id)}">&{'questionList.table.cell.edit'}</a></td>
		<td><a href="@{Application.send2Mobile(question.id)}">&{'questionList.table.cell.sendtomobile'}</a></td>
	</tr>
#{/list}
</table>
<br>	
<a href="@{Application.addQuestion()}">&{'index.link.newquestion'}</a>
